<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:replace="main_layout::html_header(~{::link}, _)">
	<link rel="stylesheet" th:href="@{/lib/cropper/2.3.4/cropper.min.css}" />
	<link rel="stylesheet" th:href="@{/css/header_pic.css}" />
</head>
 
<body class="hold-transition skin-blue fixed">
<div class="wrapper">

<header class="main-header" th:replace="main_layout::header">
</header>

<aside class="main-sidebar">
	<section class="sidebar" th:replace="main_layout::menu">
	</section>
</aside>

<div class="content-wrapper">
<section class="content-header">
	<h1><a th:href="@{/}">首页</a><small><a th:href="@{/user/password}">修改密码</a></small></h1>
</section>
	
<section class="content">
<div class="row">
<div class="col-sm-12">
<div class="box box-info">

<div class="box-header with-border form-title" style="text-align: center;">
	<div class="col-sm-5">
		<h3 class="box-title">修改密码</h3>
	</div>
</div>

<form class="form-horizontal" th:action="@{/user/password}" method="post" id="password_form">
	<div class="box-body">
		<div class="form-group">
			<label class="col-sm-2 control-label">原密码</label>
			<div class="col-sm-3">
				<input type="password" class="form-control" name="oldPassword" 
				data-rule-required="true" data-msg-required="原密码不能为空" />
			</div>
			<div class="col-sm-5"><p class="form-control-static error"></p></div>
		</div>
		<div class="form-group">
			<label class="col-sm-2 control-label">新密码</label>
			<div class="col-sm-3">
				<input type='password' name='password' id="password" class='form-control' 
				data-rule-required="true" data-msg-required="新密码不能为空"
				data-rule-minlength = '5' data-msg-minlength = "密码长度不能小于 5 个字母" />
			</div>
			<div class="col-sm-5"><p class="form-control-static error"></p></div>
		</div>
		<div class="form-group">
			<label class="col-sm-2 control-label">确认密码</label>
			<div class="col-sm-3">
				<input type='password' name='confirm_password' class='form-control' id="confirm_password" 
				data-rule-required="true" data-msg-required="确认密码不能为空"
				data-rule-minlength = '5' data-msg-minlength = "密码长度不能小于 5 个字母" 
				data-rule-equalTo = "#password" data-msg-equalTo = "两次密码输入不一致" 
				/>
			</div>
			<div class="col-sm-5"><p class="form-control-static error"></p></div>
		</div>
		<div class="box-footer">
			<div class="col-sm-offset-2 col-sm-10">
				<button type="submit" class="btn btn-primary"> &nbsp;&nbsp;保  存&nbsp;&nbsp; </button> 
				<a href="user.html" th:href="@{/}" class="btn btn-default"> &nbsp;&nbsp;取  消&nbsp;&nbsp; </a>
			</div>
		</div>				
	</div>
</form>

</div></div></div>
</section>
</div>
  
<footer class="main-footer" th:replace="main_layout::footer">
</footer>


<aside class="control-sidebar control-sidebar-light">
    
</aside>

<div class="control-sidebar-bg" ></div>

</div>
<script th:src="@{/lib/jquery-validation/1.16.0/jquery.validate.min.js}"></script>
<script th:src="@{/lib/jquery-validation/1.16.0/messages_zh.js}"></script>
<script th:src="@{/lib/cropper/2.3.4/cropper.min.js}"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script>
if("[[${error}]]") {
	$.dialog.alert("[[${error}]]");
}
$().ready(function() {
	$("#password_form").validate({
		errorPlacement: function(error, element) {
		    error.appendTo(element.closest(".form-group").find(".error"));
		}
	});
});
</script>
</body>
</html>
